<template>
  <div>
      <div class="card">
      <el-card class="box-card">
        <div>
          <div>
            <div>
              <img src="https://jiaman.top/20220104/27ae0f2967804247a80eec68154fd670.jpg" />
            </div>
            <div class="num"><h5>今日预约人数:&nbsp;<span class="currentNum">{{currentNum}}</span></h5></div>
          </div>
          <div>
            <div class="desc"><h5>预约概况</h5></div>
              <div class="total"><h3>预约总人数:&nbsp;<span class="Total">{{total}}</span></h3></div>
          </div>
        </div>
      </el-card>

      <el-card class="box-card">
        <div style="display=flex">
          <div>
            <div>
              <img src="https://jiaman.top/20220104/27ae0f2967804247a80eec68154fd670.jpg" />
            </div>
            <div class="num"><h5>今日购买人数:&nbsp;<span class="currentNum">{{currentNum}}</span></h5></div>
          </div>
          <div>
            <div class="desc"><h5>药品购买概况</h5></div>
              <div class="total"><h3>订单总数:&nbsp;<span class="Total">{{totalOrder}}</span></h3></div>
          </div>
        </div>
      </el-card>
    </div>
    <div >
      <el-tag type="success" size="medium" class="tag">值班信息</el-tag>
      <div class="table">
        <el-table
         :header-cell-style="{textAlign: 'center'}"
        :data="tableData"
        border
        style="width: 73%">
          <el-table-column
            prop="one"
            label="星期一"
            width="200">
          </el-table-column>
          <el-table-column
            prop="two"
            label="星期二"
            width="190">
          </el-table-column>
          <el-table-column
            prop="three"
            width="190"
            label="星期三">
          </el-table-column>
          <el-table-column
            prop="four"
            label="星期四"
            width="190">
          </el-table-column>
          <el-table-column
            prop="five"
            label="星期五"
            width="246">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        total: 0,
        currentNum: 0,
        totalOrder: 0,
        currentOrder: 0,
        dataListLoading: false,
        loading: false,
        load1: false,
        load2: false,
        currentTime: '',
        tableData:[
          {one: '刘云',
           two: '张三',
           three: '无用',
           four: '李四',
           five: '徐玉'
          },
          {one: '张三',
           two: '李四',
           three: '无用',
           four: '刘云',
           five: '徐玉'
          },
          {one: '张三',
           two: '李四',
           three: '无用',
           four: '刘云',
           five: '徐玉'
          },
          {one: '任康焕',
           two: '简邦余',
           three: '吴军卓',
           four: '许欣英',
           five: '武邦致'
          }
        ]
      }
    },
    activated () {
      this.getAppointmentCount()
      this.getOrderCount()
      this.getCurrentAppointment()
      this.getCurrentOrder()
    },
    methods: {
      getAppointmentCount () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/hos/appointment/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': 1,
            'limit': 100,
            'key': ''
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.total = data.page.totalCount
          } else {
            this.total = 0  
          }
          this.dataListLoading = false
        })    
      },
      getOrderCount () {
        this.loading = true
        this.$http({
          url: this.$http.adornUrl('/hos/order/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': 1,
            'limit': 100,
            'key': ''
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.totalOrder = data.page.totalCount
          } else {
            this.total = 0  
          }
          this.dataListLoading = false
        })  
      },
      getCurrentAppointment () {
        this.load1 = true
        var date = new Date()
        var year = date.getFullYear()
        var month = date.getMonth()
        var day = date.getDate()
        this.currentTime = year + '-' + month + '-' + day
        console.log(this.currentTime)
        this.$http({
          url: this.$http.adornUrl('/hos/appointment/getCurrent'),
          method: 'get',
          params: this.$http.adornParams({
            date: this.currentTime
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.currentNum = data.count
            } else {
              this.total = 0  
            }
            this.load1 = false
          })
        })
      },
      getCurrentOrder () {
        this.load2 = true
        var myDate = new Date();
        this.currentTime = myDate.toLocaleDateString().split('/').join('-')
        console.log(this.currentTime)
        this.$http({
          url: this.$http.adornUrl('/hos/order/getCurrent'),
          method: 'get',
          params: this.$http.adornParams({
            date: this.currentTime
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.currentOrder = data.data
            } else {
              this.total = 0  
            }
            this.load1 = false
          })
        })
      }
    }
  }
</script>

<style>
  .mod-home {
    line-height: 1.5;
  }
  .box-card {
    width: 480px;
    height: 160px;
    margin-left: 50px;
    background: rgb(65,178,166);
  }
  .num {
    color: #fff;
  }
  .desc{
    margin-left:200px;
    margin-top: -90px;
    color: #fff;
  }
  .total{
    margin-left:200px;
    margin-top: 30px;
    color: #fff;
  }
  .card{
    display: flex;
  }
  .table{
    margin-left: 50px;
    margin-top: 20px;
  }
  .tag{
    width: 180px;
    height: 50px;
    text-align: center;
    line-height:50px;
    margin-left: 50px;
    margin-top: 30px;
  }
  .el-table{
    text-align: center;
  }
</style>

